<!--
 - Copyright 2022. Huawei Technologies Co., Ltd. All rights reserved.

 - Licensed under the Apache License, Version 2.0 (the "License");
 - you may not use this file except in compliance with the License.
 - You may obtain a copy of the License at

 -   http://www.apache.org/licenses/LICENSE-2.0

 - Unless required by applicable law or agreed to in writing, software
 - distributed under the License is distributed on an "AS IS" BASIS,
 - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 - See the License for the specific language governing permissions and
 - limitations under the License.
 -->

<!-- 固件升级 -->
<template>
    <div>
        <HeadLine :headName="$t('BDT_fascialgun_firmware_upgrade')" @backClick="backClick"/>
        <div class="upgrade_container" :style="style">
            <div class="upgrade_container_progress" v-if="!checkDone && isUpdateCompelete != '2'">
                <CircleProgress
                    ref="progress"
                    class="progress"
                    :canvasWidth="canvasWidth"
                    :strokeWidth="strokeWidth"
                    :centerImage="centerImage"
                >
                </CircleProgress>
            </div>
            <div class="device_line" v-else>
                <img class="device_img" :class="{'rtl-l': $rtl}" src="@/assets/image/device.png">
            </div>
            <span class="progress_title" :class="{'rtl-l': $rtl}">{{ progressTitle }}</span>
            <VersionModule
                v-for="(item, i) in versions"
                :key="i"
                :info="item"
                @versionClick="versionClick(item.isNew, i)"
            />
            <div class="version_btn">
                <button @click="btnClick" class="btn" :class="{gary: !checkDone, 'rtl-l': $rtl}">{{ $t('BDT_fascialgun_check_updates') }}</button>
            </div>
        </div>
    </div>
</template>

<script>
import HeadLine from "@/components/HeadLine";
import CircleProgress from "../components/CircleProgress";
import VersionModule from "../components/VersionModule";

export default {
    components: {
        CircleProgress,
        HeadLine,
        VersionModule,
    },
    data() {
        return {
            canvasWidth: 25 * window.rem,
            strokeWidth: 2.4 * window.rem,
            versions: [
                {
                    title: "当前版本",
                    msg: "1.0.0",
                    img: require("@/assets/image/ic_public_right.svg"),
                    isNew: '0'
                }
            ],
            style: {
                marginTop: (px2rem(window.topHeight)+5.6) + 'rem'
            },
            progressTitle: "正在检查...",  //正在检查...    已是最新版本    发现新版本
            centerImage: require('@/assets/image/device.png'),
            haveNewVersion: true,  // 是否有新版本
            checkDone: false,  // 是否检查完成
            isUpdateCompelete: '0',  // 0--未进行更新操作   1--更新页点击取消返回   2--更新完成返回
            cancelCheck: false, //取消检查
        };
    },
    mounted() {
        this.oninit();
    },
    methods: {
        // 初始化
        oninit(){
            this.isUpdateCompelete = this.$route.query.updateCompelete || '0';
            this.checkVersion();
        },

        //返回
        backClick(){
            this.cancelCheck = true;
            this.$router.push('/');
        },

        //检查更新
        btnClick(){
            if(!this.checkDone){
                return;
            };
            this.checkDone = false;
            this.isUpdateCompelete = '0';
            this.progressTitle = '正在检查...';
            this.checkVersion();
        },

        // 跳转到版本页
        versionClick(data, index){
            this.$router.push({
                path: '/versionView',
                query: {isNew: data}
            });
        },

        //版本检查
        checkVersion(){
            // 无新版本
            if(!this.haveNewVersion){
                let timer = setTimeout(()=>{
                    this.progressTitle = "已是新版本";
                    this.checkDone = true;
                    clearTimeout(timer);
                },3000)
                return;
            }

            // 有新版本
            if(this.isUpdateCompelete == '2'){ // 更新完成
                this.progressTitle = "已是新版本";
                this.checkDone = true;
                return;
            }

            // 未进行过更新操作，前往新版本页
            if(this.isUpdateCompelete == '0'){
                let timer = setTimeout(()=>{
                    this.addNewVersion();
                    if(!this.cancelCheck){
                        // this.$router.push({
                        //     path: '/versionView',
                        //     query: {isNew: '1'}
                        // });
                    }
                    clearTimeout(timer);
                },3000)
            }else{
                // 更新取消后直接展示新版本
                this.addNewVersion();
            }
        },

        //添加新版本信息
        addNewVersion(){
            this.checkDone = true;
            this.progressTitle = "发现新版本";
            let len = this.versions.length;
            //添加新版本之前先清空上一次的新版本信息
            this.versions = [ this.versions[len-1] ];

            this.versions.unshift(
                {
                    title: "新版本",
                    msg: "1.1.0",
                    img: require("@/assets/image/ic_public_right.svg"),
                    isNew: '1'
                }
            );
        }
    },
};
</script>

<style scoped>
    .upgrade_container {
        display: flex;
        flex-direction: column;
        padding: 0 1.2rem;
        position: fixed;
        top: 0;
        left: 0;
        width: -webkit-fill-available;
        height: -webkit-fill-available;
        overflow: hidden scroll;
    }

    .upgrade_container_progress {
        height: 28.8rem;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 1.6rem;
    }

    .device_line{
        height: 21.2rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .progress_title {
        font-family: HarmonyOS_Sans_SC_Medium;
        font-size: 1.8rem;
        text-align: center;
        line-height: 2.5rem;
        margin-bottom: 3.2rem;
    }

    .device_img{
        width:16.8rem;
        height: 16.8rem;
    }

    .version_btn{
        position: fixed;
        bottom: 0;
        right: 0;
        width: 100%;
        text-align: center;
        margin-bottom: 2.1rem;
    }

    .btn{
        width: 18rem;
        height: 4rem;
        font-size: 1.6rem;
        font-family: HarmonyOS_Sans_SC_Medium;
        background: #fb6522;
        color: #fff;
        border: 0;
        border-radius: 2rem;
    }

    .gary{
        opacity: .5;
    }
</style>
